<template>
  <el-col>
    <div class="thisTitle">你的好朋友们在这里</div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#5fafff"
      text-color="rgb(81 81 81)"
      active-text-color="#1389ff"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>好友</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            :key="friend.userId"
            v-for="friend in friends"
            @click="beignChat(friend)"
          >
            <el-avatar class="pic" :size="32" :src="friend.image" />
            <span style="color: rgb(81 81 81)">{{
              friend.username
            }}(id:{{friend.userId}})</span></el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-help"></i>
          <span>群组</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            :key="gro.groupId"
            v-for="gro in groups"
            @click="beignGroupChat(gro)"
          >
            <el-avatar class="pic" :size="32" :src="gro.image" /><span
              style="color: rgb(81 81 81)"
              >{{ gro.groupName }}(id:{{gro.groupId}})</span
            ></el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
</template>

<script>
import * as request from "@/utils/request";
import { mapState } from "vuex";
export default {
  name: "list",
  data() {
    return {
      friend: {
        userId: "",
        username: "",
        sex: "",
        image: "",
        description: "",
      },
      group: {
        groupId: "",
        groupName: "",
        image: "",
        description: "",
        members: "",
        admin: null,
      },
      friends: [],
      groups: [],
      currentState: {
        toId: "",
        type: "",
      },
      //点击次数
      i:1,
      j:1
    };
  },
 computed: {
    ...mapState({
      // 当前用户信息
      myInfo: "myInfo",
    }),
  },
  created() {},
  mounted() {
    let that = this;
    // let id = 1;
    // console.log("id:"+id)
    request
      .getJSON("http://localhost:8081/userFriend/getAllFriends", {
          
      })
      .then(function (result) {
        if(result.data.code==200){
           for (let i of result.data.data) {
          that.friend = i;
         // that.friend.image =i.image;
          that.friends.push(that.friend);
        }
        }
      });

    request
      .getJSON("http://localhost:8081/group/allAlreadyJoinedGroups", {
        
      })
      .then(function (result) {
        let data=result.data.data;
        data.filter(i => {
          let group = {};
          group.groupId = i.groupId;
          group.description = i.description;
          group.groupName = i.groupName;
          group.image =i.image;
          group.members = i.membersId.toString();
          group.admin = i.admin;
          that.groups.push(group);
        });
        console.log("获取该用户全部群组",that.groups)
      });
  },
  methods: {
    // 拼接字符串，与后端一致
    getString(objects) {
      let string = "";
      for (let i of objects) {
        string += i + ",";
      }
      return string;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    beignChat(friend) {
      console.log(friend);
      this.$store.dispatch("chooseAccept", {
        toId: friend.userId,
        type: 1,
        groupChannel:false,
        username: friend.username,
        image: friend.image,
        ownerImage: this.myInfo.image,
        owner: this.myInfo.username,
        description: friend.description,
        ownerId:this.myInfo.userId,
      });
      // if(this.i!=1){
      //  //刷新当前页
      // location.reload();
      // }
      // this.i++
    },
    beignGroupChat(group) {
      console.log("存储群聊信息了")
      this.$store.dispatch("chooseAccept", {
        type: 9,
        toId: group.groupId,
        groupChannel:true,
        //群聊名称
        username: group.groupName,
        //发言人的用户名
        owner:this.myInfo.username,
        //发言人的id
        ownerId:this.myInfo.userId,
        //发言人的照片
        ownerImage:this.myInfo.image,
        //群组图片
        image: group.image,
        description: group.description,
        members: group.members,
      });
    },
  },
};
</script>

<style lang="css">
.thisTitle {
  font-family: sans-serif;
  background: #389bff;
  font-size: 15px;
  line-height: 50px;
  font-weight: 800;
}
.el-submenu__title i {
  color: rgb(81 81 81);
}
.pic {
  position: relative;
  bottom: 1.5px;
  margin-right: 8px;
}
</style>
